<template>
  <x-collapse expand :title="t['私有配置']">
    <a-space fill direction="vertical" class="mt-2">
      <!-- 编辑区域 -->
      <div>
        <textarea v-model="currentShape.text" v-noPaste v-focus class="textarea"> </textarea>
        <div v-if="currentShape.type === 'd-text'" class="text-[12px]">
          <a-typography-text type="warning">
            <IconInfoCircle /> {{ t["谨慎修改"] }}
          </a-typography-text>
        </div>

        <div class="flex justify-between format items-center mt-2">
          <div v-if="currentShape.type === 'd-text'" class="flex gap-2 items-center text-[12px]">
            <span>{{ t["分隔符"] }}</span>
            <a-checkbox v-model="currentShape.format" style="width: 64px"></a-checkbox>
          </div>
          <div class="flex items-center">
            <span class="text-[12px]">{{ t["阿拉伯"] }}</span>
            <a-checkbox
              v-model="currentShape.arabic"
              style="width: 64px"
              @change="toArabic"
            ></a-checkbox>
          </div>
        </div>
      </div>
    </a-space>
    <a-divider />
    <a-space fill direction="vertical" size="medium">
      <a-row>
        <a-col :span="8">
          <div class="text-[12px] text-gray-500">{{ t["字体大小"] }}</div>
        </a-col>
        <a-col :span="16">
          <a-input-number v-model="currentShape.fontSize" size="mini"> </a-input-number>
        </a-col>
      </a-row>
      <a-row :align="'center'" :gutter="12" justify="end">
        <a-col :span="8">
          <div class="text-[12px] text-gray-500">{{ t["字体"] }}</div>
        </a-col>
        <a-col :span="16">
          <a-select
            v-model="currentShape.fontFamily"
            :options="fontFamilyList"
            :field-names="{ label: 'title' }"
            size="mini"
            allow-clear
            @change="setFontFamily"
          >
            <template #prepend> prepend </template>
          </a-select>
        </a-col>
        <!--  -->
      </a-row>
      <a-row>
        <a-col :span="8">
          <div class="text-[12px] text-gray-500">{{ t["背景颜色"] }}</div>
        </a-col>
        <a-col :span="16"> <ColorPicker v-model="currentShape.bgcolor"></ColorPicker></a-col>
      </a-row>
      <!--  -->
      <a-row>
        <a-col :span="8">
          <div class="text-[12px] text-gray-500">{{ t["字体颜色"] }}</div>
        </a-col>
        <a-col :span="16"> <ColorPicker v-model="currentShape.textColor"></ColorPicker></a-col>
      </a-row>
      <!--  -->
      <a-row>
        <a-col :span="8">
          <div class="text-[12px] text-gray-500">{{ t["换行"] }}</div>
        </a-col>
        <a-col :span="16">
          <a-radio-group
            v-model="currentShape.wrap"
            :options="translateOptions(wrapOptions)"
          ></a-radio-group
        ></a-col>
      </a-row>
    </a-space>
    <a-divider></a-divider>
    <a-card :body-style="{ padding: '0' }" :bordered="false">
      <div class="flex flex-wrap justify-between">
        <a-checkbox v-model="currentShape.overflow">
          <span class="text-[12px] text-gray-500">{{ t["超出隐藏"] }}</span>
        </a-checkbox>
        <a-checkbox v-model="currentShape.bold">
          <span class="text-[12px] text-gray-500">{{ t["加粗"] }}</span>
        </a-checkbox>
        <a-checkbox v-model="underline" @change="setUnderline">
          <span class="text-[12px] text-gray-500">{{ t["下划线"] }}</span>
        </a-checkbox>
        <a-checkbox v-model="lineThrough" @change="setLineThrough">
          <span class="text-[12px] text-gray-500">{{ t["删除线"] }}</span>
        </a-checkbox>
        <a-checkbox v-model="currentShape.wordWrap">
          <span class="text-[12px] text-gray-500">{{ t["单词换行"] }}</span>
        </a-checkbox>
      </div>

      <a-button type="text" @click="textCheckout">
        {{ t["自动宽高"] }}
      </a-button>
    </a-card>

    <div>
      <div>
        <div class="text-gray-500 flex justify-between w-full mb-3 items-center">
          <div v-if="currentShape.type === 'd-text'" class="flex justify-between">
            <div class="title">{{ t["显示小数"] }}</div>
            <a-switch v-model="currentShape.decimal.hasDecimal"></a-switch>
          </div>
        </div>
        <DynamicConfig
          v-if="
            currentShape.type === 'd-text' &&
            Number(currentShape.fieldType) === 1 &&
            currentShape.decimal.hasDecimal
          "
        ></DynamicConfig>
        <div v-if="currentShape.decimal" class="flex gap-2">
          <div class="w-full flex items-center gap-2 my-2">
            <div class="title">
              {{ t["分隔符"] }}
            </div>
            <a-select size="mini" :options="formatOptions" v-model="currentShape.decimal.format">
            </a-select>
          </div>
          <div class="w-full flex items-center gap-2">
            <div class="title">{{ t["前缀"] }}</div>
            <a-select size="mini" :options="prefixOptions" v-model="currentShape.decimal.prefix">
            </a-select>
          </div>
        </div>
      </div>
    </div>
  </x-collapse>

  <x-collapse expand :title="t['字体位置']">
    <TextPosition v-model:value="currentShape.textPosition" />
  </x-collapse>
</template>

<script setup lang="ts">
import { currentShape } from "@/views/paint/modules/data/shapes";

import { getTextDomRect } from "@/utils/dom.utils";

import { formatOptions, prefixOptions } from "@/api/selector/dict";
import { fontFamilyList } from "@/views/paint/layout/init";
import TextPosition from "./TextPosition.vue";
import DynamicConfig from "./components/DynamicConfig.vue";

/**
 * 注释: 打开文本高级配置
 *
 * */
const t = translate("公共模块");

const wrapOptions = [
  {
    label: "原始格式",
    value: "pre"
  },
  {
    label: "自动换行",
    value: "normal"
  },
  {
    label: "不换行",
    value: "nowrap"
  }
];
const underline = ref(false);

const lineThrough = ref(false);

function getArabic(number: number): any {
  if (isNaN(number)) {
    return number;
  }
  const easternArabicNumbers = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];

  const numberString = String(number);
  let result = "";

  for (let i = 0; i < numberString.length; i += 1) {
    const char = numberString[i];
    if (char === ".") {
      result += ".";
    } else {
      const digit = parseInt(char!, 10);
      result += easternArabicNumbers[digit];
    }
  }

  return result;
}

const toArabic = () => {
  if (currentShape.value.arabic) {
    const number = getArabic(currentShape.value.text as any);

    if (isNaN(number)) {
      currentShape.value.text = number;
    }
  }
};

function textCheckout() {
  const rect = getTextDomRect(currentShape.value as any);
  currentShape.value.w = Math.round(rect.width);
  currentShape.value.h = Math.round(rect.height);
  currentShape.value.lineHeight = rect.height;
}
const setFontFamily = (fontFamily: any) => {
  currentShape.value.fontFamily = fontFamily;
};

const setUnderline = () => {
  if (currentShape.value.decoration !== "underline") {
    currentShape.value.decoration = "underline";
  } else {
    currentShape.value.decoration = "";
  }
};
const setLineThrough = () => {
  if (currentShape.value.decoration !== "line-through") {
    currentShape.value.decoration = "line-through";
  } else {
    currentShape.value.decoration = "";
  }
};
watch(
  currentShape,
  () => {
    underline.value = currentShape.value.decoration === "underline";
    lineThrough.value = currentShape.value.decoration === "line-through";
    // wrap.value = currentShape.value.wrap !== "nowrap";
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.position-title {
  line-height: 1.5;
}
.warning-text {
  font-size: 12px;
  position: absolute;
  bottom: calc(0% + 10px);
  left: 5px;
  color: orange;
}
textarea {
  width: 100%;
  border: 1px solid #eee;
  padding: 8px;
  resize: vertical;
  outline: none;
}
.format {
  @apply center;
}
.arco-divider {
  margin: 12px 0;
}
.title {
  @apply text-[12px]  text-nowrap text-gray-500 mr-2;
}
</style>
